<template>
  <div class="ElectricityPricebox">
    <div class="topbox">
      <div>
        <span>微电网/园区</span>
        <span>
          <el-select v-model="classId" placeholder="请选择微电网" size="small">
              <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.id">
              </el-option>
          </el-select>
        </span>
        <span>日期</span>
        <span>
          <el-date-picker
            size="small"
            v-model="year"
            value-format="yyyy"
            type="year"
            placeholder="选择年">
          </el-date-picker>
        </span>
      </div>
      <div>
        <el-button size="small" @click="chongzhi">重置</el-button>
        <el-button type="primary" size="small" @click="getlist">查询</el-button>
      </div>
    </div>
    <div class="bodybox">
      <div class="title">
        <div>电价配置信息</div>
        <div class="butti">
          <el-button type="primary" size="small" style="margin-right: 10px;" @click="addlist">新增</el-button>
          <TopTile @command="command"  @shuaxin="shuaxin"></TopTile>
        </div>
      </div>
      <div class="table">
        <TableColumn
        ref="tabledata"
        :tableData="tableData"
        :tableConfig="tableConfig"
        :issize="issize">
        <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="120">
            <template #default="{row}">
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <i @click="updatelist(row)" class="el-icon-edit" style="color:#1a90fe ;margin-right: 15px; cursor: pointer;"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i @click="shanchu(row)" class="el-icon-delete" style="color: red;cursor: pointer;margin-right: 15px;"></i>
              </el-tooltip>
            </template>
        </el-table-column>
      </TableColumn>
         <!-- 底部分页 -->
         <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pages.pageNo"
                :page-size="20"
                @current-change="getlist"
                :total="+totalCount">
          </el-pagination>
          </div>
      </div>
    </div>
    <el-dialog
      title="电价方案配置信息"
      :visible.sync="dialogVisible"
      width="45%">
      <div>
        <el-form ref="form" :model="form" label-width="140px">
          <el-row>
              <el-col :span="12">
                <el-form-item label="用电企业">
                  <el-select v-model="form.classId" placeholder="请选择微电网" size="small" :disabled="form.id?true:false" style="width: 100%;" @change="getfangan">
                      <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.id">
                      </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="年份">
                  <el-date-picker size="small" @change="getfangan" v-model="form.year" value-format="yyyy" type="year" placeholder="选择月" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row >
            <el-col :span="24">
                <el-form-item label="系统类型">
                  <el-select v-model="form.systemType" placeholder="请选择系统类型" size="small" style="width: 100%;" @change="getjifei">
                      <el-option v-for="item in systemlist" :key="item.value" :label="item.text" :value="item.value">
                      </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row >
            <el-col :span="24">
                <el-form-item label="计费类型">
                  <el-select v-model="form.chargeType" placeholder="请选择计费类型" size="small" style="width: 100%;">
                      <el-option v-for="item in chargelist" :key="item.value" :label="item.name" :value="item.code">
                      </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row >
            <el-col :span="24">
                <el-form-item label="电度电价方案">
                  <el-select v-model="form.electricPriceSchemeId" placeholder="请选择电度电价方案" size="small" style="width: 100%;">
                      <el-option v-for="item in electriclist" :key="item.value" :label="item.templateName" :value="item.templateId">
                      </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row >
            <el-col :span="24">
                <el-form-item label="按容基本电价方案">
                  <el-select v-model="form.capacitySchemeId" placeholder="请选择按容基本电价方案" size="small" style="width: 100%;">
                      <el-option v-for="item in jibenlist" :key="item.value" :label="item.templateName" :value="item.templateId">
                      </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row >
            <el-col :span="24">
                <el-form-item label="按实际需量电价方案">
                  <el-select v-model="form.actualDemandSchemeId" placeholder="请选择按实际需量电价方案" size="small" style="width: 100%;">
                      <el-option v-for="item in jibenlist" :key="item.value" :label="item.templateName" :value="item.templateId">
                      </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row >
            <el-col :span="24">
                <el-form-item label="力调电费方案">
                  <el-select v-model="form.adjustDemandSchemeId" placeholder="请选择力调电费方案" size="small" style="width: 100%;">
                      <el-option v-for="item in litiaolist" :key="item.value" :label="item.templateName" :value="item.templateId">
                      </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao" size="small">取 消</el-button>
        <el-button type="primary"  @click="submit" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getzidianxialaapi} from '@/api/guidelines'
import {getdianwanglistapi,getdianjialistapi,getfanganlistapi,getjifeilistapi,postaddlistapi,postupdatelistapi,postdeletelistapi} from '@/api/Microgrid/ElectricityPrice'
import TopTile from '@/components/TopTooltip/index.vue'
import TableColumn from '@/components/Table/index.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn
  },
  data() {
    return {
      form:{classId:'',year:''},
      year: '',
      issize:'',
      classId: '',
      totalCount: '',
      dialogVisible:false,
      options: [],
      litiaolist:[],
      jibenlist:[],
      chargelist:[],
      tableData: [],
      systemlist: [],
      electriclist:[],
      tableConfig: [
        {label:'序号', type: 'index', width: '70',center:'center' },
        {label:'用电企业',prop:'className'},
        {
          label: '系统类型', prop: 'systemType',
          formatter: (row, column, cellValue, index) => {
            return this.systemlist.find(ele=>ele.value==cellValue)?.text
          }
        },
        {label:'年份',prop:'year',center:'center'},
        {label:'计费类型',prop:'chargeTypeName'},
        {label:'电度电价方案',prop:'electricPriceSchemeName'},
        {label:'按容基本电价方案',prop:'capacitySchemeName'},
        {label:'按实际需量基本电价方案',prop:'actualDemandSchemeName'},
        {label:'力调电费方案',prop:'adjustDemandSchemeName'}
      ],
      pages: {
        pageNo: 1,
        pageSize:20
      },
    };
  },

  async mounted() {
    // 获取微电网下拉
    const { data: { list } } = await getdianwanglistapi()
    this.options = list
    // 获取系统类型下拉
    const { data: { list: systemlist } } = await getzidianxialaapi({ dictType: 'MGD_SYSTEM_TYPE' })
    this.systemlist = systemlist
    this.getlist()
  },

  methods: {
    // 弹窗确认
    submit() {
      const {classId,systemType,year,chargeType,electricPriceSchemeId,capacitySchemeId,actualDemandSchemeId,adjustDemandSchemeId}=this.form
      this.form.id ? postupdatelistapi({
        classId, systemType, year, chargeType, electricPriceSchemeId, capacitySchemeId, actualDemandSchemeId, adjustDemandSchemeId,id:this.form.id
      }).then(res => {
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message:res.code=='200'?'修改成功':res.message
        })
        if(res.code=='200')this.getlist()
      }):postaddlistapi(this.form).then(res => {
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message:res.code=='200'?'新增成功':res.message
        })
        if(res.code=='200')this.getlist()
      })
      this.quxiao()
    },
   //获取表格数据
    async getlist() {
      this.$refs.tabledata.loading=true
      const { data: { list,totalCount } } = await getdianjialistapi({ classId: this.classId, pageNo: this.pages.pageNo - 1, pageSize: this.pages.pageSize, year: this.year })
      this.totalCount = totalCount
      this.tableData=list
      this.$refs.tabledata.loading=false
    },
    // 新增
    addlist() {
      this.dialogVisible = true
      this.$set(this.form,'classId',this.classId)
    },
    // 修改
    async updatelist(row) {
      this.dialogVisible=true
      this.$set(this.form,'classId',row.classId)
      this.$set(this.form,'year',row.year)
      this.$set(this.form, 'systemType', row.systemType)
      await this.getjifei()
      await this.getfangan()
      this.form = { ...row }
    },
    // 删除
    shanchu(row) {
      this.$confirm('此操作将会删除该电费方案, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then( () => {
          postdeletelistapi(row.id).then(res => {
              this.$message({
                type: res.code == '200' ? 'success' : 'warning',
                message: res.code == '200' ? '删除成功':res.message
              })
              if(res.code=='200') this.getlist()
           })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 弹窗取消
    quxiao() {
      this.dialogVisible = false
      this.form={classId:'',year:''}
    },
    // 重置
    chongzhi(){
      this.classId = ''
      this.year = ''
      this.getlist()
    },
    // 获取电价方案
    async getfangan() {
      if (this.form.classId) {
        // 获取电度电价
        this.$set(this.form,'electricPriceSchemeId','')
        const { data: { list: electriclist } } = await getfanganlistapi({ classId: this.form.classId, type: '01', year: this.form.year })
        this.electriclist = electriclist
        // 获取基本电价
        this.$set(this.form,'capacitySchemeId','')
        this.$set(this.form,'actualDemandSchemeId','')
        const { data: { list: jibenlist } } = await getfanganlistapi({ classId: this.form.classId, type: '02', year: this.form.year })
        this.jibenlist = jibenlist
        // 获取力调电价
        this.$set(this.form,'adjustDemandSchemeId','')
        const { data: { list: litiaolist } } = await getfanganlistapi({ classId: this.form.classId, type: '03', year: this.form.year })
        this.litiaolist=litiaolist
      }
    },
    // 获取计费类型
    async getjifei() {
      this.$set(this.form,'chargeType','')
      const { data: { list: chargelist } } = await getjifeilistapi({ systemType: this.form.systemType })
      this.chargelist = chargelist
    },
   // 调节表格密度
   command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 刷新列表
    shuaxin() {
      this.getlist()
      this.$message.success('列表刷新成功')
    },
  },
};
</script>

<style scoped>
.ElectricityPricebox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    line-height: 80px;
    padding: 0 20px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    color: #606266;
    span{
      margin-right: 15px;
    }
  }
  .bodybox{
    height: calc(100% - 90px);
    padding: 20px;
    background-color: #fff;
    .title{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .butti{
        display: flex;
      }
    }
    .table{
      height: 88%;
    }
    .fenye{
      margin-top: 10px;
      text-align: right;
    }
  }
}
::v-deep .el-dialog__footer{
  text-align: center;
}
</style>